<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>登录</title>
	<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
	<link rel="stylesheet" type="text/css" href="/stylesheets/body.css" />
</head>

<body>
	<div class="dwo">
		<div class="panda">
			<div class="ear"></div>
			<div class="face">
				<div class="eye-shade"></div>
				<div class="eye-white">
					<div class="eye-ball"></div>
				</div>
				<div class="eye-shade rgt"></div>
				<div class="eye-white rgt">
					<div class="eye-ball"></div>
				</div>
				<div class="nose"></div>
				<div class="mouth"></div>
			</div>
			<div class="body"> </div>
			<div class="foot">
				<div class="finger"></div>
			</div>
			<div class="foot rgt">
				<div class="finger"></div>
			</div>
		</div>
		<form action="/checkLogin" method="post">
			<div class="hand"></div>
			<div class="hand rgt"></div>
			<h1>总管理后台</h1>
			<div class="form-group">
				<input type="text" placeholder="账号" required="" id="user_id" name="user_id" class="form-control">
			</div>
			<div class="form-group">
				<input type="password" placeholder="密码" required="" id="password" name="password" class="form-control">
				<p class="alert">验证未通过！</p>
			</div>
			<button class="btn" type="submit">登 录</button>
		</form>
	</div>
	<!-- container -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
		integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
		crossorigin="anonymous"></script>
	<script>
		$('#password').focusin(function () {
			$('form').addClass('up')
		})
		$('#password').focusout(function () {
			$('form').removeClass('up')
		})

		// 眼睛移动
		$(document).on('mousemove', function (event) {
			var dw = $(document).width() / 15
			var dh = $(document).height() / 15
			var x = event.pageX / dw
			var y = event.pageY / dh
			$('.eye-ball').css({
				width: x,
				height: y
			})
		})

// // 表单验证
// $('.btn').click(function () {
//   $('form').addClass('wrong-entry')
//   setTimeout(function () {
//       $('form').removeClass('wrong-entry')
//   }, 3000)
// })
	</script>
</body>

</html>